<template>
  <div>
    <!-- <div class="banner">
      <div class="banner-left">
        <span class="banner-title">已选 (6)</span>
        <div class="banner-line">
          <span class="banner-line-span"
            ><span>100-200万</span><img :src="closeb" alt=""
          /></span>
          <span class="banner-line-span"
            ><span>200-500万</span><img :src="closeb" alt=""
          /></span>
        </div>
      </div>
      <span class="banner-reset">重置选项</span>
    </div>
    <div v-if="!isShow">
      <div class="shaixuan">
        <img :src="shaixuan" alt="" srcset="" />
        常用筛选
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <div class="m20">
          <el-form-item label="关键词" style="width: 60%">
            <el-input
              v-model="form.name"
              placeholder='输入关键词，可指定"搜索范围”，至少2个字'
            ></el-input>
          </el-form-item>
          <el-form-item label="搜索范围">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="企业名" name="type"></el-checkbox>
              <el-checkbox label="法人/股东" name="type"></el-checkbox>
              <el-checkbox label="地址" name="type"></el-checkbox>
              <el-checkbox label="经营范围" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="行业分类">
            <el-select v-model="form.region" placeholder="全部行业">
              <el-option label="建筑" value="shanghai"></el-option>
              <el-option label="旅游" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="shaixuan">
          <img :src="shaixuan" alt="" srcset="" />
          工商信息
        </div>
        <div class="m20">
          <el-form-item label="参保人数">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="0人" name="type"></el-checkbox>
              <el-checkbox label="1-4人" name="type"></el-checkbox>
              <el-checkbox label="5-9人" name="type"></el-checkbox>
              <el-checkbox label="10-19人" name="type"></el-checkbox>
              <el-checkbox label="20-99人" name="type"></el-checkbox>
              <el-checkbox label="100-499人" name="type"></el-checkbox>
              <el-checkbox label="500-999人" name="type"></el-checkbox>
              <el-checkbox label="1000-4999人" name="type"></el-checkbox>
              <el-checkbox label="5000-9999人" name="type"></el-checkbox>
              <el-checkbox label="10000人以上" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="注册资本">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="100万以下" name="type"></el-checkbox>
              <el-checkbox label="100-200万" name="type"></el-checkbox>
              <el-checkbox label="200-500万" name="type"></el-checkbox>
              <el-checkbox label="500-1000万" name="type"></el-checkbox>
              <el-checkbox label="1000万以上" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="w52h22Style">
      <img :src="w52h22" alt="" srcset="" @click="isShow = !isShow" />
    </div> -->

    <div class="m20" v-if="enterpriselist.length > 0">
      <div
        class="shopList"
        @click="jumpQYDetail(items)"
        v-for="(items, index) in enterpriselist"
        :key="index"
      >
        <div class="shopListTitle">
          {{ items.companyName }}
        </div>
        <div class="shopListContent1">
          <div class="shopTitle">
            <span>{{ items.companyName }}</span>
            <span  class="shopListContent-span">我要咨询</span>
          </div>
          <div class="shopListContent">
            <el-tag type="danger" effect="plain" v-for="(item,index) in basetaglist" :key="index">
								{{item.name}}
							</el-tag>
            <!-- <span class="shopListContent-span1">软件著作权</span>
            <span class="shopListContent-span2">A股企业</span>
            <span class="shopListContent-span3">新三板</span> -->
          </div>
          <div class="shopListContent2">
            <img :src="p1" alt="" class="w16" />
            <div class="shopListContent2-div">
              公司简介： {{ items.company_profile }}
            </div>
          </div>
          <div class="shopListContent2">
            <img :src="p2" alt="" class="w16" />
            <div class="shopListContent2-div">
              法定代表人：{{ items.legalPerson }}
            </div>
            <img :src="p3" alt="" class="w16" />
            <div class="shopListContent2-div">
              注册日期： {{ items.establishDate.substr(0, 10) }}
            </div>
            <img :src="p4" alt="" class="w16" />
            <div class="shopListContent2-div">
              注册资本： {{ items.capitalNum }} 万元
            </div>
          </div>
          <div class="shopListContent2">
            <span class="address">企业地址：</span>
            <span> {{ items.companyAddress }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="block" v-if="enterpriselist.length > 0">
      <el-pagination
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumberQY"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="prev, pager, next "
        :total="totalQY"
      >
      </el-pagination>
    </div> -->
    <div class="m20" v-else>
      <div class="nodata">
        <img :src="nodata" alt="" srcset="">
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["enterpriselist", "totalQY", "pageNumberQY","basetaglist"],
  data() {
    return {
      nodata: require("@/assets/map/nodata.png"),
      closeb: require("@/assets/map/closeb.png"),
      shaixuan: require("@/assets/map/shaixuan.png"),
      w52h22: require("@/assets/map/w52h22.png"),
      p1: require("@/assets/map/p1.png"),
      p2: require("@/assets/map/p2.png"),
      p3: require("@/assets/map/p3.png"),
      p4: require("@/assets/map/p4.png"),
      form: {
        name: "",
        type: "",
        region: "",
      },
      isShow: false,
      pageSize: 20,
    };
  },
  mounted() {},
  methods: {

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.$emit("setPageNum", val);
      // this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$emit("setPageNumQY", val);
    },
    jumpQYDetail(item) {
      this.$router.push({
        path: "/details",
        query: {
          id: item.companyId,
          uniscid:item.creditNo
        },
      });
    },
  },
};
</script>
<style lang="scss">
.shopListContent2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  margin-top: 10px;
}
.w16 {
  display: flex;
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.banner {
  height: 50px;
  line-height: 50px;
  background: #f4f8fc;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .banner-reset {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #0071df;
    cursor: pointer;
  }
  .banner-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    .banner-title {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 14px;
      color: #222222;
    }

    .banner-line {
      display: flex;
      flex-direction: row;
      align-items: center;
      display: flex;
      .banner-line-span {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 26px;
        line-height: 26px;
        text-align: center;
        background: #eef7ff;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #73baff;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #0071df;
        margin-left: 20px;
        padding: 0 10px;
        img {
          display: block;
          width: 10px;
          height: 10px;
          margin-left: 4px;
          cursor: pointer;
        }
      }
    }
  }
}
.m20 {
  margin: 20px;
}
.shaixuan {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px;
  img {
    width: 18px;
    height: 18px;
    display: flex;
    margin-right: 5px;
  }
}
.w52h22Style {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  background: #f6f6f6;
  padding-bottom: 20px;
  img {
    display: flex;
    width: 52px;
    height: 22px;
    cursor: pointer;
  }
}
.shopList {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e6e6e6;
  padding: 15px 0;
}
.shopListTitle {
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  background: #7db3da;
  border-radius: 4px 4px 4px 4px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
}
.shopTitle {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.shopListContent1 {
  margin-left: 20px;
  width: 100%;
}
.shopListContent {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.shopListContent-span1 {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #ff824b;
  text-align: center;
  font-style: normal;
  text-transform: none;
  width: 77px;
  height: 21px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #ff824b;
  margin-right: 10px;
  display: flex;
}

.shopListContent-span2 {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #36b254;
  text-align: center;
  font-style: normal;
  text-transform: none;
  width: 62px;
  height: 21px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #36b254;
  margin-right: 10px;
}

.shopListContent-span3 {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #56baee;

  text-align: center;
  font-style: normal;
  // text-transform: none;
  width: 54px;
  height: 21px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #56baee;
  margin-right: 10px;
}
.shopListContent2-div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.address {
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #999999;
}
.shopListContent-span {
  width: 112px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #ffffff;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #217fe4;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  color: #217fe4;
  cursor: pointer;
}
.nodata {
  padding-top: 20%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;


}
.nodata img {
  width: 350px;
  height: 350px;
    display: inline-block;
  }
</style>
